<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>HOME</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<link rel="stylesheet" href="./xznstatic/css/common.css"/>
	<link rel="stylesheet" href="./xznstatic/css/style.css"/>
</head>
<style type="text/css">
	html, body {
		height: 100%;
	}
	#iframe {
		width: 100%;
		margin-top: 00px;
		padding-top: 70px;
	}
	#header {
		height: auto;
		background: #c05555;
		border-bottom: 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	#header .nav-top {
		display: flex;
		align-items: center;
		padding: 0 20px;
		font-size: 16px;
		color: #e04b84;
		box-sizing: border-box;
		height: 00px;
		background-color: rgb(86, 100, 218);
		box-shadow: 0 10px 8px #eae2e5;
		justify-content: space-between;
		position: relative;
	}

	#header .nav-top-img {
		width: 124px;
		height: 40px;
		padding: 0;
		margin: 0;
		border-radius: 6px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0,0,0,.3);
		box-shadow: 0 0 6px rgba(0,0,0,.3);
	}

	#header .nav-top-title {
		line-height: 40px;
		font-size: 30px;
		color: rgb(3, 3, 3);
		padding: 0 10px;
		margin: 0 10px;
		border-radius: 6px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0,0,0,.3);
		box-shadow: 0 0 0px ;
	}

	#header .nav-top-tel {
		line-height: 40px;
		font-size: 18px;
		color: rgba(240, 252, 255, 1);
		padding: 0 10px;
		margin: 0;
		border-radius: 6px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0,0,0,.3);
		box-shadow: 0 0 0px ;
	}

	#header .navs {
		display: flex;
		padding: 0 20px;
		align-items: center;
		box-sizing: border-box;
		height: 70px;
		background-color: rgb(241, 239, 240);
		box-shadow: 0 0px 0px rgba(0,0,0,0);
		justify-content: flex-start;
	}
	#header .navs .title {
		width: auto;
		line-height: 40px;
		font-size: 30px;
		color: rgba(255, 255, 255, 1);
		padding: 10px 10px 10px;
		margin: 50px;
		border-radius: 6px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0,0,0,.3);
		box-shadow: 0 0 6px rgba(0,0,0,0);
	}
	#header .navs li {
		display: inline-block;
		width: auto;
		line-height: 66px;
		padding: 0 10px ;
		margin: 10px ;
		color: rgba(255, 255, 255, 1);
		font-size: 22px;
		border-radius: 4px;
		border-width: 0;
		border-style: solid;
		border-color: rgb(218, 35, 101);
		background-color: rgb(74, 115, 239);
		box-shadow: 1px 0 3px rgb(218, 35, 101);
		text-align: center;
	}
	#header .navs li a{
		color: inherit;
	}
	#header .navs li.current a{
		color: inherit;
	}
	#header .navs li a:hover{
		color: inherit;
	}
	#header .navs li.current {
		color: rgba(255, 255, 255, 1);
		font-size: 22px;
		border-radius: 0px;
		border-width: 0px;
		border-style: solid;
		border-color: rgba(255, 255, 255, 1);
		background-color: rgb(67, 110, 217);
		box-shadow:  0px 3px  0px #ffffff;
	}
	#header .navs li:hover {
		color: #fff;
		font-size: 22px;
		border-radius: 0px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(255, 255, 255, 1);
		background-color: rgb(68, 81, 229);
		box-shadow:  0px 3px  0px #ffffff;
	}
</style>
<body>
<!-- start 顶部导航栏 -->
<div id="header">
	<div v-if='true' class="nav-top">
		<!-- <img v-if='false' class="nav-top-img" src='https://www.baidu.com/img/flexible/logo/pc/result@2.png'> -->
		<!-- <div v-if="false" class="nav-top-title">{{projectName}}</div> -->
		<!-- <div class="nav-top-tel"></div> -->
	</div>
	<div class="navs">
		<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
		<div class="title" v-if="true" v-text="projectName"></div>
		<div class="list">
			<ul>
				<!-- 买家功能：浏览产品列表 -->
				<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>HOME</a></li>
				<!-- 买家功能：浏览产品列表 -->
				<li class='current'><a href="javascript:navPage('./pages/shangpinxinxi/list.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-link"></i>shop_information</a></li>
				<li class='current'><a href="javascript:navPage('./pages/news/list.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-link "></i>quickview</a></li>
				<!-- 买家功能：注册登录以访问个性化功能、查看个人中心 -->
				<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>User Center</a></li>
				<li class='current'><a href="./pages/behind/houtai.html" class="menumain" ><i v-if="false" class="layui-icon layui-icon-link"></i>Backstage</a></li>
				<!-- 买家功能：添加商品到购物车、管理购物车、通过购物车付款 -->
				<li v-if="cartFlag"><a href="javascript:navPage('./pages/shop-cart/list.html')" class="menumain"><i v-if="false" class="layui-icon">&#xe657;</i>Cart</a></li>
				<!-- 买家功能：注册登录以访问个性化功能、与客服沟通 -->
									<li v-if="chatFlag"><a href="javascript:chatTap()" class="menumain"><i v-if="false" class="layui-icon">&#xe677;</i>Online Chat</a></li>




			</ul>
		</div>
	</div>
</div>
<!-- end 顶部导航栏 -->

<!-- 买家功能：浏览产品详情页 -->
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>

<div id="tabbar" v-if="true" class="tabbar" :style='{"padding":"30px 0","boxShadow":"0 0 6px ","margin":"30px 0 0 0","borderColor":"rgba(255, 255, 255, 0.3)","backgroundColor":"rgba(121, 82, 6, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}' style="position: relative;z-index: 999;">
	<img v-if='false' :style='{"boxShadow":"0 0 6px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"1px","width":"44px","borderStyle":"solid","height":"44px"}' style='display: block;' src='http://codegen.caihongy.cn/20201024/ed5e326ca66f403aa3197b5fbb4ec733.jpg' />
	<div :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#000","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="record"></div>
	<div :style='{"padding":"0 10px","boxShadow":"0 0 0px ","margin":"10px auto 30px auto","borderColor":"rgba(121, 82, 6, 1)","backgroundColor":"rgba(6, 82, 121, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"1px 0","width":"40%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="desc"></div>
</div>

<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/config.js"></script>

<script>
	var vue1 = new Vue({el: '#tabbar'})

	var vue = new Vue({
		el: '#header',
		data: {
			iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
			indexNav: indexNav,
			cartFlag: cartFlag,
			adminurl: adminurl,
			chatFlag: chatFlag,
			projectName: projectName,
		},
		mounted: function() {
			this.bindClickOnLi();
		},
		created() {
			this.iconArr.sort(()=>{
				return (0.5-Math.random())
			})
		},
		methods: {
			jump(url) {
				jump(url)
			},
			bindClickOnLi() {
				let list = document.getElementsByTagName("li");
				for(var i = 0;i<list.length;i++){
					list[i].onclick = function(){
						$(this).addClass("current").siblings().removeClass("current");
					}
				}
			}
		}
	});

	layui.use(['element','layer'], function() {
		var element = layui.element;
		var layer = layui.layer;
	});

	function chatTap(){
		var userTable = localStorage.getItem('userTable');
		if (userTable) {
			layui.layer.open({
				type: 2,
				title: 'Online Chat',
				area: ['600px', '600px'],
				content: './pages/chat/chat.html'
			});
		} else {
			window.location.href = './pages/login/login.html'
		}
	}

	// 导航栏跳转
	function navPage(url) {
		localStorage.setItem('iframeUrl', url);
		document.getElementById('iframe').src = url;
	}

	// 跳转到个人中心也
	function centerPage() {
		var userTable = localStorage.getItem('userTable');
		if (userTable) {
			localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
			document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
		} else {
			window.location.href = './pages/login/login.html'
		}
	}

	var iframeUrl = localStorage.getItem('iframeUrl');
	document.getElementById('iframe').src = './pages/home/home.html';

	// var i = 0;
	setInterval(function(){
		// i++;
		// if(i<50) changeFrameHeight();
		changeFrameHeight();
	},200)

	function changeFrameHeight() {
		var iframe = document.getElementById('iframe');
		// iframe.height = 'auto';
		if (iframe) {
			var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
			if (iframeWin.document.body) {
				iframe.height = iframeWin.document.body.scrollHeight;
			}
		}
	};

	//  窗口变化时候iframe自适应
	// function changeFrameHeight() {
	// var header = document.getElementById('header').scrollHeight;
	//     let isshow = true
	//     var tabbar = 0
	//     if(isshow) {
	//       tabbar = document.getElementById('tabbar').scrollHeight
	//     }
	// var ifm = document.getElementById("iframe");
	// ifm.height = document.documentElement.clientHeight - header - tabbar;
	// ifm.width = document.documentElement.clientWidth;
	// }

	// reasize 事件 窗口大小变化后执行的方法
	window.onresize = function() {
		changeFrameHeight();
	}
</script>
</body>
</html>
